<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  chartTitle: String,
  chartType: String,
  categoryOn: String,
  categoryName: String,
  valueName: String,
  chartCategory: Array,
  seriesValue: Array,
});
const emits = defineEmits(['change-year'])
const chartOption = ref({
  title: {
    text: props.chartTitle,
  },
  legend: {},
  tooltip: {},
  xAxis: {
  },
  yAxis: {},
  series: [],
});
const barlinemain = ref();
const barlineChart = ref();
onMounted(() => {
  if (props.categoryOn=='X') {
    chartOption.value.xAxis.type = 'category'
    chartOption.value.xAxis.name = props.categoryName
    chartOption.value.xAxis.data = props.chartCategory
    chartOption.value.yAxis.type = 'value'
    chartOption.value.yAxis.name = props.valueName
  } else {
    chartOption.value.yAxis.type = 'category'
    chartOption.value.yAxis.name = props.categoryName
    chartOption.value.yAxis.data = props.chartCategory
    chartOption.value.xAxis.type = 'value'
    chartOption.value.xAxis.name = props.valueName
  }
  chartOption.value.series = props.seriesValue
  barlineChart.value = echarts.init(barlinemain.value);
  barlineChart.value.setOption(chartOption.value);
  barlineChart.value.on('click', (params)=>{
    // console.log('params',params);
    emits('change-year',params.name,params.dataIndex)
  })
});
</script>

<template>
  <div ref="barlinemain" class="barlineview"></div>
</template>

<style lang="scss" scoped>
.barlineview {
  width: 100%;
  height: 100%;
  display: flex;
  border: 0px solid red;
}
</style>
